<template>
	<view class="player-container">
		<!-- 主播放器界面 -->
		<view class="music-player tn-safe-area-inset-bottom">
			<!-- 顶部导航栏 -->
			<tn-nav-bar fixed :isBack="true" @clickBack="goBack" backgroundColor="#FFFFFF">
				<view class="custom-nav__title tn-text-lg tn-text-bold">
					<text>音乐播放</text>
				</view>
			</tn-nav-bar>

			<view class="player-content tn-margin-top-lg" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
				<!-- 专辑封面 -->
				<view class="album-cover-container">
					<view class="album-cover" :class="{ 'rotating': isPlaying }">
						<image :src="currentSong.cover" mode="aspectFill"></image>
					</view>
				</view>

				<!-- 歌曲信息 -->
				<view class="song-info">
					<text class="song-title tn-text-xl tn-text-bold tn-text-center">{{ currentSong.title }}</text>
					<text class="song-artist tn-text-gray tn-text-center">{{ currentSong.artist }}</text>
				</view>

				<!-- 进度条 -->
				<view class="progress-container tn-margin-horizontal">
					<text class="time-current tn-text-xs tn-text-gray">{{ formatTime(currentTime) }}</text>
					<slider class="progress-slider" :value="progress" :activeColor="'#ff6b81'"
						:backgroundColor="'#e0e0e0'" @changing="onSliderChanging" @change="onSliderChange" />
					<text class="time-total tn-text-xs tn-text-gray">{{ formatTime(totalDuration) }}</text>
				</view>

				<!-- 播放控制按钮 -->
				<view class="player__way tn-flex tn-flex-col-center tn-flex-row-center">
					<!-- 播放模式切换按钮 -->
					<view class="tn-padding-sm tn-margin-xs">
						<view @click="togglePlayMode"
							class="player__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-blue">
							<view class="tn-icon-refresh-square tn-two" v-if="playMode === 'list'"></view>
							<view class="tn-icon-revoke tn-two" v-else-if="playMode === 'single'"></view>
							<view class="tn-icon-ninja tn-two" v-else></view>
						</view>
					</view>

					<!-- 上一首 -->
					<view class="tn-padding-sm tn-margin-xs">
						<view @click="previous"
							class="player__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-blue">
							<view class="tn-icon-previous-song"></view>
						</view>
					</view>

					<!-- 播放/暂停 -->
					<view class="tn-padding-sm tn-margin-xs" @click="togglePlay">
						<view
							class="player__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-blue">
							<view class="tn-icon-stop-circle" v-if="isPlaying"></view>
							<view class="tn-icon-play-fill" v-else></view>
						</view>
					</view>

					<!-- 下一首 -->
					<view class="tn-padding-sm tn-margin-xs">
						<view @click="next"
							class="player__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-blue">
							<view class="tn-icon-next-song"></view>
						</view>
					</view>

					<!-- 播放列表按钮 -->
					<view class="tn-padding-sm tn-margin-xs">
						<view @click="togglePlaylist"
							class="player__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-blue">
							<view class="tn-icon-order tn-two"></view>
						</view>
					</view>
				</view>
			</view>

			<!-- 其他控制选项 -->
			<view class="extra-controls tn-flex tn-flex-row-center tn-margin-top-lg">
				<view class="extra-btn" @click="toggleLike">
					<view class="tn-icon-heart tn-two" :class="{ 'tn-color-red': isLiked }"></view>
				</view>
				<view class="extra-btn">
					<view class="tn-icon-repeat tn-two tn-color-gray"></view>
				</view>
				<view class="extra-btn">
					<view class="tn-icon-random tn-two tn-color-gray"></view>
				</view>
				<view class="extra-btn">
					<view class="tn-icon-list tn-two tn-color-gray"></view>
				</view>
			</view>
		</view>
		<!-- 弹出式播放列表 -->
		<view class="playlist-popup" :class="{ 'show': showPlaylist }">
			<!-- 半透明遮罩 -->
			<view class="playlist-popup__mask" @click="togglePlaylist"></view>

			<!-- 列表内容 -->
			<view class="playlist-popup__content">
				<!-- 列表头部 -->
				<view class="playlist-popup__header">
					<view class="playlist-popup__title">播放列表</view>
					<view class="playlist-popup__count">{{ playlist.length }}首歌曲</view>
					<view class="playlist-popup__close" @click="togglePlaylist">
						<view class="tn-icon-close-circle tn-color-gray"></view>
					</view>
				</view>

				<!-- 列表内容 - 添加上拉刷新功能 -->
				<scroll-view 
					class="playlist-popup__list" 
					scroll-y
					refresher-enabled="true"
					refresher-background="#f8f8f8"
					refresher-triggered="isRefreshing"
					@refresherrefresh="onRefresh"
					@refresherpulling="onRefresherPulling"
				>
					<view class="playlist-popup__item" v-for="(song, index) in playlist" :key="index"
						@click="playSongByIndex(index)" :class="{ 'active': index === currentSongIndex }">
						<view class="playlist-popup__item-index">{{ index + 1 }}</view>
						<view class="playlist-popup__item-info">
							<view class="playlist-popup__item-title">{{ song.title }}</view>
							<view class="playlist-popup__item-artist">{{ song.artist }}</view>
						</view>
						<view class="playlist-popup__item-play" v-if="index === currentSongIndex">
							<view class="tn-icon-play-circle-fill tn-color-blue"></view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
		<!-- 锁屏播放界面 -->
		<view class="lock-screen-player" :class="{ 'show': isLockScreen }" v-if="isPlaying">
			<view class="lock-screen-content">
				<!-- 专辑封面 -->
				<view class="lock-screen-cover" :class="{ 'rotating': isPlaying }">
					<image :src="currentSong.cover" mode="aspectFill"></image>
				</view>
				
				<!-- 歌曲信息 -->
				<view class="lock-screen-info">
					<text class="lock-screen-title">{{ currentSong.title }}</text>
					<text class="lock-screen-artist">{{ currentSong.artist }}</text>
				</view>
				
				<!-- 播放进度 -->
				<view class="lock-screen-progress">
					<text class="lock-screen-time">{{ formatTime(currentTime) }}</text>
					<slider 
						class="lock-screen-slider" 
						:value="progress" 
						:activeColor="'#ff6b81'"
						:backgroundColor="'#e0e0e0'" 
						@changing="onSliderChanging" 
						@change="onSliderChange" 
					/>
					<text class="lock-screen-time">{{ formatTime(totalDuration) }}</text>
				</view>
				
				<!-- 播放控制 -->
				<view class="lock-screen-controls">
					<view class="lock-screen-btn" @click="previous">
						<view class="tn-icon-previous-song tn-color-white"></view>
					</view>
					<view class="lock-screen-btn play-btn" @click="togglePlay">
						<view class="tn-icon-stop-circle tn-color-white" v-if="isPlaying"></view>
						<view class="tn-icon-play-fill tn-color-white" v-else></view>
					</view>
					<view class="lock-screen-btn" @click="next">
						<view class="tn-icon-next-song tn-color-white"></view>
					</view>
				</view>
				
				<!-- 解锁提示和滑动条 -->
			<view class="lock-screen-unlock-wrapper">
				<view class="lock-screen-unlock-bar">
					<view class="lock-screen-unlock-slider"></view>
				</view>
				<view class="lock-screen-unlock" @click="unlockScreen">
					<text>上滑解锁</text>
				</view>
			</view>
			</view>
		</view>
	</view>
</template>

<style scoped>
	/* 播放器样式 */
	.player {
		position: relative;
		padding-top: 20rpx;
		padding-bottom: 100rpx;
	}

	.player__img {
		width: 500rpx;
		height: 500rpx;
		margin: 60rpx auto;
		position: relative;
		transition: all 0.3s ease;
	}

	.player__img__cover {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background-color: #f2f2f2;
		object-fit: cover;
	}

	.player__img__needle {
		position: absolute;
		top: -70rpx;
		left: 50%;
		transform: translateX(-50%) rotate(-20deg);
		transform-origin: 50% 0;
		width: 80rpx;
		height: 200rpx;
		transition: transform 0.3s ease;
	}

	.player__img__needle--playing {
		transform: translateX(-50%) rotate(0deg);
	}

	.player__info {
		padding: 0 40rpx;
		margin-top: 60rpx;
	}

	.player__info__title {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.player__info__artist {
		font-size: 28rpx;
		color: #666;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.player__progress {
		padding: 40rpx;
	}

	.player__progress__time {
		font-size: 24rpx;
		color: #999;
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.player__progress__bar {
		height: 8rpx;
		background-color: #e0e0e0;
		border-radius: 4rpx;
		position: relative;
	}

	.player__way {
		margin-top: 40rpx;
	}

	.player__way__item--icon {
		width: 120rpx;
		height: 120rpx;
	}

	.player__way__item--icon .tn-icon-play-fill {
		width: 90rpx;
		height: 90rpx;
	}

	.player__way__item--icon .tn-icon-stop-circle {
		width: 90rpx;
		height: 90rpx;
	}

	.player__way__item--icon .tn-icon-previous-song-fill,
	.player__way__item--icon .tn-icon-next-song-fill,
	.player__way__item--icon .tn-icon-repeat,
	.player__way__item--icon .tn-icon-random,
	.player__way__item--icon .tn-icon-list {
		width: 60rpx;
		height: 60rpx;
	}

	/* 播放列表弹窗样式 */
	.playlist-popup {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
		display: flex;
		flex-direction: column;
		align-items: center;
		transform: translateY(100%);
		transition: transform 0.3s ease;
	}

	.playlist-popup.show {
		transform: translateY(0);
	}

	.playlist-popup__mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: -1;
	}

	.playlist-popup__content {
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
		width: 100%;
		max-height: 80vh;
		overflow: hidden;
	}

	.playlist-popup__header {
		padding: 30rpx 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.playlist-popup__title {
		font-size: 36rpx;
		font-weight: bold;
	}

	.playlist-popup__count {
		font-size: 28rpx;
		color: #999;
	}

	.playlist-popup__close {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.playlist-popup__close .tn-icon-close-circle {
		width: 50rpx;
		height: 50rpx;
	}

	.playlist-popup__list {
		height: 500rpx;
	}

	.playlist-popup__item {
		padding: 30rpx 40rpx;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.playlist-popup__item.active {
		background-color: #f8f8f8;
	}

	.playlist-popup__item-index {
		width: 60rpx;
		font-size: 28rpx;
		color: #999;
		text-align: center;
	}

	.playlist-popup__item-info {
		flex: 1;
		margin-left: 20rpx;
	}

	.playlist-popup__item-title {
		font-size: 32rpx;
		margin-bottom: 8rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.playlist-popup__item-artist {
		font-size: 26rpx;
		color: #999;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.playlist-popup__item-play {
		width: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.playlist-popup__item-play .tn-icon-play-circle-fill {
		width: 40rpx;
		height: 40rpx;
	}
</style>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	export default {
		name: 'MusicPlayer',
		mixins: [template_page_mixin],
		data() {
			return {
				isPlaying: false,
				currentTime: 0,
				totalDuration: 0,
				progress: 0,
				isLiked: false,
				autoPlay: false,
				audioContext: null,
				// 播放模式：'list' - 列表循环, 'single' - 单曲循环, 'random' - 随机播放
				playMode: 'list',
				// 播放列表显示状态
				showPlaylist: false,
				// 下拉刷新状态
				isRefreshing: false,
				// 锁屏状态
				isLockScreen: false, 
				// 系统屏幕状态监听
				screenListener: null,
				// 手势滑动相关
				touchStartY: 0,
				touchEndY: 0,
				currentSong: {
					title: '未知歌曲',
					artist: '未知艺术家',
					url: '',
					cover: ''
				},
				playlist: [{
						title: '蓝眼泪',
						artist: '半吨兄弟',
						url: 'http://t5b31oov7.hn-bkt.clouddn.com/%E6%84%9F%E8%B0%A2%E4%BD%A0%E6%9B%BE%E6%9D%A5%E8%BF%87_%E6%9D%A8%E5%AE%97%E7%BA%AC%E5%91%A8%E6%80%9D%E6%B6%B5Wiz_H%E5%BC%A0%E5%AD%90%E8%B1%AA.mp3?e=1762439861&token=KIBAjXVR3IA6-sKs_061r51ILeGPdfxIk7IHNtdn:0QadTofwKB_zBcAYISW4Ss4IwaA=', // 使用绝对路径
						cover: 'https://resource.tuniaokj.com/images/shop/sticker.jpg'
					},
					{
						title: '城北的花',
						artist: '王宇宙Leto&乔浚丞',
						url: 'https://dolojia.top/file/%E7%8E%8B%E5%AE%87%E5%AE%99Leto&%E4%B9%94%E6%B5%9A%E4%B8%9E%20-%20%E5%9F%8E%E5%8C%97%E7%9A%84%E8%8A%B1.mp3', // 使用绝对路径
						cover: 'https://resource.tuniaokj.com/images/shop/sticker.jpg'
					}
				],
				currentSongIndex: 0
			}
		},
		onLoad(options) {
				// 设置自动播放状态
				this.autoPlay = options.autoPlay || false
				// 获取音乐数据
				this.fetchMusicData()
				// 初始化锁屏监听
				this.initScreenListener()
			},
			
			onShow() {
				// 页面显示时检查是否需要显示锁屏界面
				if (this.isLockScreen) {
					this.isLockScreen = false
				}
				// 更新浏览器标题
				this.updateBrowserTitle()
			},
			
			onHide() {
				// 页面隐藏时，如果音乐正在播放，显示锁屏界面
				if (this.isPlaying) {
					this.isLockScreen = true
				}
			},

			onUnload() {
				// 如果音乐正在播放，显示锁屏界面
				if (this.isPlaying) {
					this.isLockScreen = true
				}
				// 恢复原始浏览器标题
				if (typeof document !== 'undefined') {
					document.title = '音乐播放'
				}
				// 页面卸载时停止播放并销毁音频上下文
				if (this.audioContext) {
					this.audioContext.stop()
					this.audioContext.destroy()
				}
				// 移除屏幕状态监听
				if (this.screenListener) {
					this.screenListener.disconnect()
				}
				// 移除手势事件监听
				if (typeof document !== 'undefined') {
					document.removeEventListener('touchstart', this.handleTouchStart)
					document.removeEventListener('touchmove', this.handleTouchMove)
					document.removeEventListener('touchend', this.handleTouchEnd)
				}
			},
		methods: {
			// 初始化音频上下文
			initAudioContext() {
				// 创建音频上下文实例
				this.audioContext = uni.createInnerAudioContext()
				// 设置音频源
				this.audioContext.src = this.currentSong.url

				// 绑定事件监听
				this.audioContext.onPlay(() => {
					this.isPlaying = true
				})

				this.audioContext.onPause(() => {
					this.isPlaying = false
				})

				this.audioContext.onStop(() => {
					this.isPlaying = false
				})

				this.audioContext.onTimeUpdate(() => {
					this.currentTime = this.audioContext.currentTime
					this.totalDuration = this.audioContext.duration
					if (this.totalDuration > 0) {
						this.progress = (this.currentTime / this.totalDuration) * 100
					}
				})

				this.audioContext.onEnded(() => {
					// 根据播放模式处理播放结束事件
					if (this.playMode === 'single') {
						// 单曲循环模式，重新播放当前歌曲
						this.audioContext.seek(0)
						this.playMusic()
					} else {
						// 其他模式，播放下一首
						this.next()
					}
				})

				this.audioContext.onError((error) => {
					console.error('音频播放错误:', error)
					this.isPlaying = false
					// 显示错误提示
					uni.showToast({
						title: '音频加载失败，请检查文件路径',
						icon: 'none',
						duration: 2000
					})
				})
			},

			// 返回上一页
			goBack() {
				uni.navigateBack()
			},

			// 设置当前歌曲
			setCurrentSong(index) {
				if (index >= 0 && index < this.playlist.length) {
					this.currentSongIndex = index
					this.currentSong = this.playlist[index]
					// 重置进度
					this.currentTime = 0
					this.progress = 0
					this.totalDuration = 0
					// 更新音频源
					if (this.audioContext) {
						try {
							// 先停止当前播放
							if (this.audioContext.stop) {
								this.audioContext.stop()
							}
							// 更新音频源
							this.audioContext.src = this.currentSong.url
							// 加载音频
							if (this.audioContext.load) {
								this.audioContext.load()
							}
						} catch (error) {
							console.error('设置歌曲出错:', error)
						}
					}
					// 更新浏览器标题
					this.updateBrowserTitle()
				}
			},
			
			// 更新浏览器标题
			updateBrowserTitle() {
				if (typeof document !== 'undefined') {
					// 添加空值检查，确保currentSong存在
					if (this.currentSong && this.currentSong.title) {
						const title = `${this.currentSong.title}`
						document.title = title
					} else {
						document.title = '音乐播放'
					}
				}
			},

			// 切换播放状态
			togglePlay() {
				if (this.isPlaying) {
					this.pauseMusic()
				} else {
					this.playMusic()
				}
			},

			// 播放音乐
			playMusic() {
				if (this.audioContext && this.audioContext.play) {
					try {
						const result = this.audioContext.play()
						// 检查结果是否为Promise对象
						if (result && typeof result.catch === 'function') {
							result.catch(error => {
								console.error('播放失败，需要用户交互:', error)
								// 显示提示信息
								uni.showToast({
									title: '请点击播放按钮开始播放',
									icon: 'none',
									duration: 2000
								})
							})
						}
					} catch (error) {
						console.error('播放音乐出错:', error)
						uni.showToast({
							title: '播放失败，请重试',
							icon: 'none',
							duration: 2000
						})
					}
					// 更新浏览器标题
					this.updateBrowserTitle()
				}
			},

			// 暂停音乐
			pauseMusic() {
				if (this.audioContext && this.audioContext.pause) {
					try {
						this.audioContext.pause()
					} catch (error) {
						console.error('暂停音乐出错:', error)
					}
					// 更新浏览器标题
					this.updateBrowserTitle()
				}
			},

			// 上一首
			previous() {
				let index = this.currentSongIndex - 1
				if (index < 0) {
					index = this.playlist.length - 1
				}
				this.setCurrentSong(index)
				this.playMusic()
			},

			// 播放模式切换
			togglePlayMode() {
				const modes = ['list', 'single', 'random']
				const currentIndex = modes.indexOf(this.playMode)
				const nextIndex = (currentIndex + 1) % modes.length
				this.playMode = modes[nextIndex]

				// 显示模式切换提示
				let modeText = ''
				switch (this.playMode) {
					case 'list':
						modeText = '列表循环'
						break
					case 'single':
						modeText = '单曲循环'
						break
					case 'random':
						modeText = '随机播放'
						break
				}
				uni.showToast({
					title: modeText,
					icon: 'none',
					duration: 1000
				})
			},

			// 切换播放列表显示状态
			togglePlaylist() {
				this.showPlaylist = !this.showPlaylist
			},
			
			// 上拉刷新处理函数
			onRefresh() {
				this.isRefreshing = true
				// 重新获取音乐数据
				setTimeout(() => {
					this.fetchMusicData()
					this.isRefreshing = false
				}, 1500)
			},
			
			// 上拉刷新过程中的回调
			onRefresherPulling() {
				// 可以在这里添加一些视觉反馈
				console.log('正在下拉刷新...')
			},
			
			// 初始化屏幕状态监听
			initScreenListener() {
				// 监听系统屏幕状态变化
				// 在实际环境中，需要根据不同平台的API进行适配
				// 这里使用setTimeout模拟锁屏行为
				
				// 在Web环境下，可以监听visibilitychange事件
				if (typeof document !== 'undefined') {
					document.addEventListener('visibilitychange', () => {
						if (document.hidden && this.isPlaying) {
							this.isLockScreen = true
						}
					})
					
					// 添加手势事件监听
					document.addEventListener('touchstart', this.handleTouchStart.bind(this))
					document.addEventListener('touchmove', this.handleTouchMove.bind(this))
					document.addEventListener('touchend', this.handleTouchEnd.bind(this))
				}
			},
			
			// 解锁屏幕
			unlockScreen() {
				this.isLockScreen = false
				// 在实际应用中，这里可以添加解锁动画效果
			},
			
			// 处理触摸开始事件
			handleTouchStart(e) {
				if (this.isLockScreen) {
					this.touchStartY = e.touches[0].clientY
				}
			},
			
			// 处理触摸移动事件
			handleTouchMove(e) {
				if (this.isLockScreen) {
					this.touchEndY = e.touches[0].clientY
				}
			},
			
			// 处理触摸结束事件
			handleTouchEnd() {
				if (this.isLockScreen && this.touchStartY > 0 && this.touchEndY > 0) {
					// 计算滑动距离，如果上滑超过100px则解锁
					const diff = this.touchEndY - this.touchStartY
					if (diff < -100) {
						this.unlockScreen()
					}
					// 重置触摸位置
					this.touchStartY = 0
					this.touchEndY = 0
				}
			},

			// 上一首
			previous() {
				if (this.playlist.length <= 1) return

				if (this.playMode === 'random') {
					// 随机播放模式下，生成一个不等于当前索引的随机数
					let randomIndex
					if (this.playlist.length > 1) {
						do {
							randomIndex = Math.floor(Math.random() * this.playlist.length)
						} while (randomIndex === this.currentSongIndex)
						this.currentSongIndex = randomIndex
					}
				} else {
					// 列表循环模式下
					this.currentSongIndex = (this.currentSongIndex - 1 + this.playlist.length) % this.playlist.length
				}

				this.setCurrentSong(this.currentSongIndex)
				// 确保切换歌曲后自动播放，移除条件判断
				this.playMusic()
			},

			// 下一首
			next() {
				if (this.playlist.length <= 1) return

				if (this.playMode === 'random') {
					// 随机播放模式下，生成一个不等于当前索引的随机数
					let randomIndex
					if (this.playlist.length > 1) {
						do {
							randomIndex = Math.floor(Math.random() * this.playlist.length)
						} while (randomIndex === this.currentSongIndex)
						this.currentSongIndex = randomIndex
					}
				} else {
					// 列表循环模式下
					this.currentSongIndex = (this.currentSongIndex + 1) % this.playlist.length
				}

				this.setCurrentSong(this.currentSongIndex)
				// 确保切换歌曲后自动播放，移除条件判断
				this.playMusic()
			},

			// 切换收藏状态
			toggleLike() {
				this.isLiked = !this.isLiked
			},

			// 格式化时间
			formatTime(seconds) {
				if (!seconds || isNaN(seconds)) return '00:00'
				const mins = Math.floor(seconds / 60)
				const secs = Math.floor(seconds % 60)
				return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
			},

			// 滑动进度条中
			onSliderChanging(e) {
				this.progress = e.detail.value
			},

			// 滑动进度条结束
			onSliderChange(e) {
				const seekTime = (e.detail.value / 100) * this.totalDuration
				if (this.audioContext && this.totalDuration > 0) {
					this.audioContext.seek(seekTime)
					this.currentTime = seekTime
				}
			},

			// 点击播放列表中的歌曲
			playSongByIndex(index) {
				this.currentSongIndex = index
				this.setCurrentSong(index)
				// 确保切换歌曲后自动播放，移除条件判断
				this.playMusic()
				// 关闭播放列表
				this.showPlaylist = false
			},

			// 从接口获取音乐数据
			fetchMusicData() {
				// 显示加载提示
				uni.showLoading({
					title: '加载音乐中...',
					mask: true
				})
				try {
					// 直接使用uni.request API
					const url = 'https://dolojia.top/eladmin/api/localStorage?current=1&size=1000&blurry=音乐'
					uni.request({
						url: url,
						method: 'GET',
						dataType: 'json',
						success: (res) => {
							// 关闭加载提示
							uni.hideLoading()
							// 处理返回的数据
							if (res && res.data && res.data.content && res.data.content.length > 0) {
								// 转换为播放器需要的格式
								const musicList = res.data.content.map(item => ({
									title: item.name,
									artist: item.name.includes('-') ? item.name.split('-')[1] :
										'未知艺术家',
									url: `https://dolojia.top/eladmin_file/音乐/${item.realName}`,
									cover: 'https://resource.tuniaokj.com/images/shop/sticker.jpg'
								}))
								console.log(musicList)
								// 更新播放列表
								this.playlist = musicList
								// 初始化音频上下文并设置当前歌曲
								this.initAudioContext()
								this.setCurrentSong(0)
								// 移除自动播放功能，音乐必须由用户交互触发
								// 显示提示，让用户点击播放按钮
								uni.showToast({
									title: '音乐已加载，请点击播放按钮',
									icon: 'none',
									duration: 2000
								})
								// 彻底移除自动播放逻辑
								// if (this.autoPlay) {
								//   this.playMusic()
								// }
							} else {
								// 没有数据时显示提示
								uni.showToast({
									title: '暂无音乐数据',
									icon: 'none',
									duration: 2000
								})
								// 使用默认数据作为后备
								this.initAudioContext()
								this.setCurrentSong(0)
							}
						},
						fail: (error) => {
							// 关闭加载提示
							uni.hideLoading()
							// 显示错误提示
							uni.showToast({
								title: '获取音乐失败，请重试',
								icon: 'none',
								duration: 2000
							})
							// 使用默认数据作为后备
							this.initAudioContext()
							this.setCurrentSong(0)
						},
						complete: () => {
							console.log("请求完成（无论成功失败）")
						}
					})
				} catch (e) {
					console.error("代码执行错误:", e)
					uni.hideLoading()
					// 使用默认数据作为后备
					this.initAudioContext()
					this.setCurrentSong(0)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/templatePage/custom_nav_bar.scss';

	.music-player {
		background-color: #f8f8f8;
		min-height: 100vh;
	}

	.player-content {
		padding-bottom: 60rpx;
	}

	.album-cover-container {
		display: flex;
		justify-content: center;
		margin: 100rpx 0;
	}

	.album-cover {
		width: 500rpx;
		height: 500rpx;
		border-radius: 50%;
		overflow: hidden;
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
	}

	.album-cover image {
		width: 100%;
		height: 100%;
	}

	.rotating {
		animation: rotate 20s linear infinite;
	}

	@keyframes rotate {
			from {
				transform: rotate(0deg);
			}

			to {
				transform: rotate(360deg);
			}
		}
		
		/* 锁屏播放样式 */
		.lock-screen-player {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #1a1a1a;
			z-index: 9999;
			display: none;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		
		.lock-screen-player.show {
			display: flex;
		}
		
		.lock-screen-content {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 60rpx 40rpx;
		}
		
		.lock-screen-cover {
			width: 500rpx;
			height: 500rpx;
			border-radius: 50%;
			overflow: hidden;
			margin-bottom: 60rpx;
			box-shadow: 0 10rpx 40rpx rgba(255, 255, 255, 0.2);
		}
		
		.lock-screen-cover image {
			width: 100%;
			height: 100%;
		}
		
		.lock-screen-info {
			text-align: center;
			margin-bottom: 60rpx;
			width: 100%;
			padding: 0 40rpx;
		}
		
		.lock-screen-title {
			font-size: 36rpx;
			color: #fff;
			font-weight: bold;
			display: block;
			margin-bottom: 10rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		
		.lock-screen-artist {
			font-size: 28rpx;
			color: #ccc;
			display: block;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		
		.lock-screen-progress {
			display: flex;
			align-items: center;
			width: 100%;
			margin-bottom: 80rpx;
			padding: 0 40rpx;
		}
		
		.lock-screen-time {
			font-size: 24rpx;
			color: #999;
			width: 80rpx;
		}
		
		.lock-screen-slider {
			flex: 1;
			margin: 0 20rpx;
		}
		
		.lock-screen-controls {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 100rpx;
		}
		
		.lock-screen-btn {
			width: 80rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 40rpx;
		}
		
		.lock-screen-btn.play-btn {
			width: 120rpx;
			height: 120rpx;
		}
		
		.lock-screen-btn .tn-icon-previous-song,
		.lock-screen-btn .tn-icon-next-song {
			font-size: 60rpx;
		}
		
		.lock-screen-btn .tn-icon-play-fill,
		.lock-screen-btn .tn-icon-stop-circle {
			font-size: 80rpx;
		}
		
		.lock-screen-unlock-wrapper {
				position: absolute;
				bottom: 100rpx;
				left: 0;
				right: 0;
				text-align: center;
				padding: 0 60rpx;
			}
			
			.lock-screen-unlock-bar {
				width: 100%;
				height: 8rpx;
				background-color: rgba(255, 255, 255, 0.3);
				border-radius: 4rpx;
				margin-bottom: 20rpx;
				overflow: hidden;
			}
			
			.lock-screen-unlock-slider {
				width: 160rpx;
				height: 100%;
				background-color: #ff6b81;
				border-radius: 4rpx;
				margin: 0 auto;
			}
			
			.lock-screen-unlock {
				color: #999;
				font-size: 28rpx;
				animation: breathe 2s infinite;
				padding: 20rpx 0;
			}
		
		@keyframes breathe {
			0%, 100% {
				opacity: 0.6;
			}
			50% {
				opacity: 1;
			}
		}

	.song-info {
		margin: 40rpx 0;
		padding: 0 40rpx;
	}

	.song-title {
		display: block;
		margin-bottom: 10rpx;
	}

	.song-artist {
		display: block;
	}

	.progress-container {
		margin-top: 60rpx;
		padding: 0 40rpx;
	}

	.progress-slider {
		margin: 0 20rpx;
	}

	.controls {
		margin-top: 100rpx;
		padding: 0 60rpx;
		height: 180rpx;
		align-items: center;
		display: flex;
		justify-content: center;
	}

	.player {

		/* 播放按钮样式控制 */
		&__way {
			margin: 0 auto;
			margin-top: 40rpx;

			&__item {
				&--icon {
					width: 85rpx;
					height: 85rpx;
					font-size: 80rpx;
					margin-bottom: 18rpx;
					position: relative;
					z-index: 1;
				}
			}
		}
	}
</style>